<template>
  <div>
    <page-list :x-uri="uri" :custom-components="custom" :doactions="doactions">
      <!-- 自定义tab -->
      <template v-slot:page-tabs>
        <tabs />
      </template>
    </page-list>

    <el-drawer :title="title" :visible.sync="drawer" :size="800">
      <el-table ref="topicTable" v-loading.lock="loading" :data="datas" style="width: 100%;margin-left: 12px;">
        <el-table-column prop="user_name" label="操作人" />
        <el-table-column prop="status_text" label="操作" />
        <el-table-column prop="content" label="操作内容" width="180" />
        <el-table-column prop="user_ip" label="操作IP" />
        <el-table-column prop="create_time" label="操作时间" />
      </el-table>
    </el-drawer>
  </div>
</template>
<script>
import PageList from '@public/template/page_list.vue';
import Titile from './components/title.vue';
import Tabs from './components/tabs.vue';
import CategoryTitle from '@/components/category-title';
import Price from './components/price.vue';
import CostPrice from './components/cost_price.vue';

export default {
  components: {
    PageList,
    Tabs
  },
  inject: ['reload'],
  data() {
    return {
      uri: 'course/admin/agent/list',
      custom: {
        title: Titile,
        cates: CategoryTitle,
        price: Price,
        cost_price: CostPrice
      },
      drawer: false,
      loading: false,
      title: '课程名称 - 记录',
      datas: [],
      doactions: [
        {
          title: '详情',
          meta: { permission: 'course.agent.list.info' },
          callback: this.info
        },
        {
          title: '记录',
          meta: { permission: 'course.agent.list.record' },
          callback: this.record
        }
      ]
    };
  },
  methods: {
    info: function({ row }) {
      this.$router.push({ path: '/course/agent/' + row.id + '/info' });
    },
    // 记录
    record: function({ row }) {
      this.title = row.title + ' - 记录';
      this.loading = true;
      this.drawer = true;
      // 获取课程代理信息
      this.$http.post(
          '/course/admin/agent/record',
          {
            course_id: row.id
          },
          response => {
            this.datas = response.data.data;
            this.loading = false;
          },
          _ => {
            this.loading = false;
          }
      );
    }
  }
};
</script>
